;~function(){
    var
        Router = new Router();
        Router.init(),
        view = document.getElementById("view");
        

        view.style.width = document.documentElement.clientWidth + "px";
        view.style.height = document.documentElement.clientHeight -36 + "px";
        console.log("widht:" + view.style.width);
        console.log("height:" + view.style.height);

        Router.route("/home",function(){
            xhrpage("../html/home.html");
        });
        Router.route("/bgintro",function(){
            xhrpage("../html/bgintro.html");
        });
        Router.route("/select",function(){
            xhrpage("../html/select.html");
        });
         Router.route("/play",function(){
            xhrpage("../html/play.html");
        });

    function xhrpage(url){
        var xhr = new XMLHttpRequest();
        xhr.open("get",url);
        xhr.send(null);
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                view.innerHTML = xhr.responseText;
            };
        }
    }

    function Router(){
        this.routes = {};
        this.curUrl = "";
        this.beforeFun = null;
        this.afterFun = null;

        this.route = function(path,callback){
            this.routes[path] = {
                callback:callback || function(){},
                fn:null
            };
            console.log("this.routes[path]:"+this.routes[path]);
        };

        this.refresh = function(){
            this.curUrl = location.hash.slice(1) || "/home";
            this.routes[this.curUrl]();
            console.log("location.hash:" + location.hash);
            console.log("curUrl:" + this.curUrl);
            console.log("this.routes[this.curUrl]:" + this.routes[this.curUrl]);
        };

        this.init = function(){
            window.addEventListener("load",this.refresh.bind(this));
            window.addEventListener("hashchange",this.refresh.bind(this));
        };
        this.beforeEach = function(callback){
               if(Object.prototype.toString.call(callback) === '[object Function]'){
                 this.beforeFun = callback;
                 }else{
                    console.trace('路由切换前钩子函数不正确')
                 }
        };
        this.afterEach = function(callback){
            if(Object.prototype.toString.call(callback) === '[object Function]'){
                this.afterFun = callback;
            }else{
                console.trace('路由切换后回调函数不正确')
            }
        };

        asyncFun:function(file,transition){
           var self = this;
           if(self.routers[transition.path].fn){
                self.afterFun && self.afterFun(transition)  
                self.routers[transition.path].fn(transition)
           }else{
               console.log("开始异步下载js文件"+file)
               var _body= document.getElementsByTagName('body')[0]; 
               var scriptEle= document.createElement('script'); 
               scriptEle.type= 'text/javascript'; 
               scriptEle.src= file; 
               scriptEle.async = true;
               SPA_RESOLVE_INIT = null;
               scriptEle.onload= function(){ 
                   console.log('下载'+file+'完成')
                   self.afterFun && self.afterFun(transition)   
                   self.routers[transition.path].fn = SPA_RESOLVE_INIT;
                   self.routers[transition.path].fn(transition)
               } 
               _body.appendChild(scriptEle);        
           }        
        }



    }
}()

